<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../css/recruitStudents.css">
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
</head>
<style>
   
</style>
<body>
    <div class="container">
        <div class="box">
            <div class="echartsBox">
                <div class="title">全校授课教师分类数量及占比</div>
                <div id="echarts1" style="width: 836px;height:320px;"></div>
            </div>
            <div class="echartsBox" style="display: none;">
                <div class="title">全校授课教师分类历年变化趋势</div>
                <div id="echarts2" style="width: 836px;height:320px;"></div>
            </div>
            <div class="echartsBox" style="display: none;">
                <div class="title">全校授课教师分类数量及占比</div>
                <div id="echarts3" style="width: 836px;height:320px;"></div>
            </div>
            <div class="echartsBox" style="display: none;">
                <div class="title">全校授课教师分类历年变化趋势</div>
                <div id="echarts4" style="width: 836px;height:320px;"></div>
            </div>
            <div class="echartsBox" style="display: none;">
                <div class="title">全校授课教师分类历年变化趋势</div>
                <div id="echarts5" style="width: 836px;height:320px;"></div>
            </div>
        </div>
        <div class="box">
            <span class="active">全校授课教师分类数量及占比</span>
            <span>全校授课教师分类历年变化趋势</span>
            <span>全校授课教师分类数量及占比</span>
            <span>全校授课教师分类历年变化趋势</span>
            <span>全校授课教师课程占比</span>
        </div>
    </div>
</body>
</html>
<script src="../layui/layui.all.js"></script>
<script>
  //JavaScript代码区域
  layui.use('element', function () {
    var element = layui.element;
    var $ = layui.jquery;
    $('.layui-btn-normal').on('click', function() {
        $('.echartsBox').eq(0).toogle(500)
        // $('.echartsBox').eq(0).addClass('fadeOutLeft')
    })
    $('.box span').on('click', function(){
        $(this).toggleClass('active')
        var index = $(this).index()
        if($(this).hasClass('active')) {
            $('.echartsBox').eq(index).show(500)
        } else {
            $('.echartsBox').eq(index).hide(500)
        }
    })
  });

  // 图标初始化
  var myChart = echarts.init(document.getElementById('echarts1'));
  var option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          data: ['非任课老师', '校内兼课老师', '校内专任老师']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2018-2019', '2017-2018', '2016-2017', '2015-2016', '2014-2105']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
              name: '非任课老师',
              type: 'bar',
              stack: '总量',
              barWidth: 30,
              itemStyle: {
              color: '#2593FC'
              },
              data: [320, 302, 301, 334, 390]
          },
          {
              name: '校内兼课老师',
              type: 'bar',
              stack: '总量',
              itemStyle: {
              color: '#27C2C1'
              },
              data: [120, 132, 101, 134, 90]
          },
          {
              name: '校内专任老师',
              type: 'bar',
              stack: '总量',
              itemStyle: {
              color: '#38C060'
              },
              data: [220, 182, 191, 234, 290]
          }
        ]
    };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option1);

  var myChart2 = echarts.init(document.getElementById('echarts2'));
  var option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      align:'right',
      data: ['A类课程', 'B类课程', 'C类课程']
    },
    grid: {
      left: '15%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018-2019学年第一学期', '2017-2018学年第二学期', '2016-2017学年第一学期', '2015-2016学年第二学期', '2014-2105学年第一学期'],
      axisLabel: {
          rotate: 10
      }

    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'A类课程',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        itemStyle: {
          color: '#F9CB34'
        },
        data: [320, 302, 301, 334, 390]
      },
      {
        name: 'B类课程',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        itemStyle: {
          color: '#ED4A66'
        },
        data: [120, 132, 101, 134, 90]
      },
      {
        name: 'C类课程',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        itemStyle: {
          color: '#844ADD'
        },
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart2.setOption(option2);

  var myChart3 =  echarts.init(document.getElementById('echarts3'));
  var option3 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            bottom: 10,
            data: ['非任课老师', '校内兼课老师', '校内专任老师']
        },
        series: [{
            type: 'pie',
            radius: 80,
            center: ['25%', '50%'],
            data: [
                {
                value: 158,
                name: '非任课老师',
                itemStyle: {
                  color: '#2593FC'
                }
              },
              {
                value: 100,
                name: '校内兼课老师',
                itemStyle: {
                  color: '#27C2C1'
                }
              },
              {
                value: 200,
                name: '校内专任老师',
                itemStyle: {
                  color: '#38C060'
                }
              }
            ]
        }, {
            type: 'pie',
            radius: 80,
            center: ['75%', '50%'],
            data: [
                {
                value: 158,
                name: '非任课老师',
                itemStyle: {
                  color: '#2593FC'
                }
              },
              {
                value: 180,
                name: '校内兼课老师',
                itemStyle: {
                  color: '#27C2C1'
                }
              },
              {
                value: 50,
                name: '校内专任老师',
                itemStyle: {
                  color: '#38C060'
                }
              }
            ]
        }]
    };
  myChart3.setOption(option3);

  var myChart4 =  echarts.init(document.getElementById('echarts4'));
  var option4 = {
      xAxis: {
          type: 'category',
          data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
      }]
  };
  myChart4.setOption(option4);

  // 图标初始化
  var myChart5 = echarts.init(document.getElementById('echarts5'));
  var option5 = {
      tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
          type:'scroll',
        data: ['A类课程', 'B类课程', 'C类课程','D类课程', 'E类课程', 'F类课程','G类课程', 'H类课程', 'I类课程','J类课程', 'K类课程', 'L类课程']
      },
      title:{
            text: '总数',
            subtext: 12312+'个',
            textStyle:{
                fontSize:14,
                color:"black"
            },
            subtextStyle: {
                fontSize: 12,
                color: '#cccccc'
            },
            textAlign:"center",
            x: '49%',
            y: '44%',
        },
      series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['40%', '55%'],

              data:[
                  {value:335, name:'A类课程',itemStyle: {
                    color: '#ED4A66'
                  }},
                  {value:310, name:'B类课程',itemStyle: {
                    color: '#844ADD'
                  }},
                  {value:234, name:'C类课程',itemStyle: {
                    color: '#2593FC'
                  }},
                  {value:335, name:'D类课程',itemStyle: {
                    color: '#ED4A66'
                  }},
                  {value:310, name:'E类课程',itemStyle: {
                    color: '#844ADD'
                  }},
                  {value:234, name:'F类课程',itemStyle: {
                    color: '#2593FC'
                  }},
                  {value:335, name:'G类课程',itemStyle: {
                    color: '#ED4A66'
                  }},
                  {value:310, name:'H类课程',itemStyle: {
                    color: '#844ADD'
                  }},
                  {value:234, name:'I类课程',itemStyle: {
                    color: '#2593FC'
                  }},
                  {value:335, name:'J类课程',itemStyle: {
                    color: '#ED4A66'
                  }},
                  {value:310, name:'K类课程',itemStyle: {
                    color: '#844ADD'
                  }},
                  {value:234, name:'L类课程',itemStyle: {
                    color: '#2593FC'
                  }},
              ]
          }
      ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart5.setOption(option5);
</script>